<template>
    <div class="gesc">
        <div class="left">
            <header>
                <h2>清月书院</h2>
                <a class="more" href="">更多>>></a>
            </header>
            <div class="m-book-four">
                <div class="contents">
                    <ul class="book f-cb" >
                        <li :class="bookclass[index]" v-for="(item,index) in GuofengList" :key="item.index">
                            <div class="m-book-info f-cb">
                                <a class="cover" href="">
                                    <img :src='item.imgurl' alt="">
                                </a>
                                <h3>{{item.name}}</h3>
                                <p>{{item.host}}</p>
                                <p class='disc eps'>{{item.message}}</p>
                                <a class="read" href="">立即阅读>>></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="right">
            <header>
                <h2>清月畅销榜</h2>
            </header>
            <div class="m-foldlist">
                <ul v-for="(item, index) in data" :key="index">
                    <li>
                        <p class="fold" v-show="xianshi[index]"  @mouseenter="enters(index)">
                            <a href="">
                                <i>{{'0'+(index +1)}}</i>{{item.title}}                       </a>
                        </p>
                        <div class="unfold" v-show="!xianshi[index]" >
                            <i>{{'0'+(index +1)}}</i>
                            <div class="border f-cb">
                                <a href="" class="img">
                                    <img  :src="item.cover">
                                </a>
                                <h3>
                                    <a href="">{{item.title}}{{xianshi[index]}}</a>
                                </h3>
                                <p>{{item.author}}</p>
                            </div>
                        </div>
                    </li>

                </ul>
                <a class='more' href="">
                    <i class="el-icon-right"></i>查看更多
                </a>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    props: {
        data: Array,
        titleVisible: {
            type: Boolean,
            default: true
        },
        titleText: {
            type: String
        },
        btnText: {
            type: String
        }
    },
    data() {
        return {
            bookclass:['up','up rt','','rt'],
            GuofengList: [
            {
                    imgurl:'https://cms-bucket.ws.126.net/2019/04/04/06ced583b74b4816976a8820c238d8a6.jpeg?imageView&quality=90&thumbnail=114y160',
                    name:'民国奇人',
                    host:'南无袈裟理科佛',
                    message:'大乱之世，江湖浩荡，正所谓“天下风云出我辈，民国奇人北斗来”，这七个，乃何人也？'
                },
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/-moHrp8L9FCtMn8Eom3fjg==/8796093023797198007?imageView&quality=90&thumbnail=114y160',
                    name:'大江大河',
                    host:'阿耐',
                    message:'作者阿耐，讲述了改革开放30多年的历史大背景下，以宋运辉、雷东宝、杨巡为代表的先行者们在变革浪潮中不断探索和突围的浮沉故事。'
                },
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/ABSkVcmwyWg-weDHhVQ5fw==/8796093024683375325?imageView&quality=90&thumbnail=114y160',
                    name:'红日之孤军',
                    host:'却却',
                    message:'哈尔滨夜幕低垂，充满压抑绝望，而再漫长的夜，也有人前仆后继，屡败屡战，由死而生。'
                },
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/OQ6_Oqqfg4BZLOipfr5c7w==/8796093024006730994?imageView&quality=90&thumbnail=114y160',
                    name:'个体崛起',
                    host:'陈立飞',
                    message:'一本帮助普通人实现爆发式成长的人生规划书，教我们用高效方法循序渐进地撑起自己的野心。'
                }
            ],
            PaihangList:[
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/OQ6_Oqqfg4BZLOipfr5c7w==/8796093024006730994?imageView&quality=90&thumbnail=114y160',
                    name:'个体崛起',
                    host:'陈立飞',
                    message:'一本帮助普通人实现爆发式成长的人生规划书，教我们用高效方法循序渐进地撑起自己的野心。'
                },
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/OQ6_Oqqfg4BZLOipfr5c7w==/8796093024006730994?imageView&quality=90&thumbnail=114y160',
                    name:'个体崛起',
                    host:'陈立飞',
                    message:'一本帮助普通人实现爆发式成长的人生规划书，教我们用高效方法循序渐进地撑起自己的野心。'
                },
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/OQ6_Oqqfg4BZLOipfr5c7w==/8796093024006730994?imageView&quality=90&thumbnail=114y160',
                    name:'个体崛起',
                    host:'陈立飞',
                    message:'一本帮助普通人实现爆发式成长的人生规划书，教我们用高效方法循序渐进地撑起自己的野心。'
                },
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/OQ6_Oqqfg4BZLOipfr5c7w==/8796093024006730994?imageView&quality=90&thumbnail=114y160',
                    name:'个体崛起',
                    host:'陈立飞',
                    message:'一本帮助普通人实现爆发式成长的人生规划书，教我们用高效方法循序渐进地撑起自己的野心。'
                },
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/OQ6_Oqqfg4BZLOipfr5c7w==/8796093024006730994?imageView&quality=90&thumbnail=114y160',
                    name:'个体崛起',
                    host:'陈立飞',
                    message:'一本帮助普通人实现爆发式成长的人生规划书，教我们用高效方法循序渐进地撑起自己的野心。'
                },
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/OQ6_Oqqfg4BZLOipfr5c7w==/8796093024006730994?imageView&quality=90&thumbnail=114y160',
                    name:'个体崛起',
                    host:'陈立飞',
                    message:'一本帮助普通人实现爆发式成长的人生规划书，教我们用高效方法循序渐进地撑起自己的野心。'
                },
            ],
            xianshi:[
              false,true,true,true,true,true
            ],

        };
    },
    methods:{
        enters(index) {
          console.log('aaaa')
           for(let index in this.xianshi){
             this.xianshi[index] = true
          }
            this.xianshi[index] = false;

          let newArr = Object.assign([], this.xianshi);
      this.xianshi = newArr;
        },

    },
    watch:{


    }

};
</script>


